<template>
  <div class="page-grey">
    <div class="top">
      <span @click="$router.back()">
        <svg-icon icon-class="back" class="icon" />
      </span>
      <span class="center">地址管理</span>
    </div>
    <van-form @submit="onSubmit">
      <van-field
        v-model="form.name"
        name="name"
        label="收货人姓名"
        placeholder="请输入姓名"
        :rules="[{ required: true, message: '请填写收货人姓名' }]"
      />
      <van-cell
        class="address"
        title="地区"
        :value="form.area || '请输入地区'"
        is-link
        @click="openArea"
      >
        <span slot="label" v-if="showPmt" class="pmt">请填写地区</span>
      </van-cell>
      <van-field
        v-model="form.address"
        name="address"
        label="收货地址"
        placeholder="请输详细地址"
        :rules="[{ required: true, message: '请填写收货详细地址' }]"
      />
      <van-field
        v-model="form.phone"
        name="phone"
        label="收货手机"
        placeholder="请输入收货手机"
        :rules="[{ required: true, message: '请填写收货手机' }]"
      />
      <van-field
        v-model="form.postCode"
        name="postCode"
        label="收货邮编"
        placeholder="请输入收货邮编"
        :rules="[{ required: true, message: '请填写收货邮编' }]"
      />
      <div style="margin: 16px;">
        <van-button class="big-btn" block native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>

    <van-popup v-model="showArea" position="bottom">
      <van-area
        :area-list="areaList"
        :value="form.areaCode"
        @confirm="confirm"
        @cancel="cancel"
      />
    </van-popup>
  </div>
</template>

<script>
import area from "../../../utils/area";
export default {
  data() {
    return {
      form: {
        name: "",
        area: "",
        address: "",
        phone: "",
        postCode: null
      },
      showPmt: false,
      areaList: area,
      showArea: false
    };
  },
  methods: {
    onSubmit(values) {
      if (!this.form.area) return (this.showPmt = true);
      console.log("submit", values);
    },
    openArea() {
      this.showArea = true;
    },
    // 完成地区级联选择
    confirm(data) {
      console.log(data);
      this.form.areaCode = data[2].code;
      data.forEach(item => {
        this.form.area += item.name;
      });
      this.showArea = false;
    },
    cancel() {
      this.showArea = false;
    }
  }
};
</script>

<style lang="scss">
.address {
  .van-cell__title {
    max-width: 90px !important;
  }
  .van-cell__value {
    flex: 1 !important;
    text-align: left;
  }
  .pmt {
    color: #ee0a24;
    white-space: nowrap;
    padding-left: 90px;
  }
}
</style>
